<template>
  <GridPage title="职位收藏列表" size="default">
    <n-card
      :bordered="false"
      style="border-radius: 10px"
      class="mt-12 h-300"
      v-show="collections.length === 0"
    >
      <n-flex align="center" justify="center" class="h-100%">
        <n-empty size="huge" description="没有收藏的职位">
          <template #extra>
            <n-button size="small" @click="handleChangePage">去招聘首页看看</n-button>
          </template>
        </n-empty>
      </n-flex>
    </n-card>
    <n-card v-for="item in collections" :bordered="false" style="border-radius: 10px" class="mt-12">
      <div class="flex">
        <n-flex vertical>
          <n-flex class="mt-5 text-20 font-600">
            <n-ellipsis style="max-width: 60%">
              {{ item.title }}
            </n-ellipsis>
            <n-text class="ml-20 color-#ff6400">
              {{ item.salary_min }}-{{ item.salary_max }}K
            </n-text>
          </n-flex>
          <n-flex>
            <n-tag
              v-for="t in item.job_tags"
              :bordered="false"
              :color="{ color: '#f8f8f8', textColor: '#666', borderColor: '#fff' }"
            >
              {{ t }}
            </n-tag>
          </n-flex>
          <n-flex class="text-12 mt-2" align="center">
            <n-avatar :src="item.company_icon" :size="22" />
            <span class="color-#07132B">
              {{ item.company_name }}
              |
            </span>
            <span class="color-#666">
              {{ getIndustriesName(item.industry_code) }}
            </span>
            <span class="color-#666">
              {{ getCompanySize(item.size) }}
            </span>
          </n-flex>
        </n-flex>
        <n-flex class="ml-auto" align="center">
          <n-button type="primary" text @click="handleDetail(item.job_id)">查看详情</n-button>
        </n-flex>
      </div>
    </n-card>
  </GridPage>
</template>

<script setup>
import { GridPage } from '@/components'
import { useSeekerStore } from '@/store'
import { getIndustriesName, getCompanySize } from '@/data'
import seekerApi from '@/api/seeker'
import { useRouter } from 'vue-router'
const seekerStore = useSeekerStore()
const router = useRouter()

const collections = ref([])

function handleChangePage() {
  router.push('/')
}

function handleDetail(job_id) {
  router.push('/job/' + job_id)
}

onMounted(async () => {
  const { data } = await seekerApi.getCollection(seekerStore.seeker.seeker_id)
  collections.value = data
})
</script>
